// 样式私有化处理  styled-components
// 路由传参
// 路由跳转
import React from "react";
import styled from "styled-components";
import {CommonListBox, titleSize, colorRed} from "./common"
import {useNavigate} from "react-router-dom";
import qs from "qs";

/* 编写组件的样式： 基于 css-in-js 思想中的 styled-components 插件 */
const MenuBox = styled.div`
  background: lightblue;
  width: 400px;

  .title {
    font-size: ${titleSize}px;
    line-height: 40px;

    &:hover {
      color: ${colorRed}
    }
  }
`

class Menu extends React.Component {
    render() {
        const {navigate} = this.props
        const handle = () => {
            // 问号传参
            // navigate({
            //     pathname:"/c",
            //     search:qs.stringify({
            //         id:2,
            //         name:333
            //     })
            // })
            // 路径传参
            // navigate("/c/2/333")
            // 隐式传参
            navigate("/c", {
                replace: true,// 添加历史记录
                state: {
                    id: 2,
                    name: 333
                }
            })
        }
        return <MenuBox>
            <CommonListBox>
                <li>手机b</li>
                <li>电脑b</li>
                <li>家电b</li>
                <button onClick={handle}>跳转
                </button>
            </CommonListBox>
        </MenuBox>;
    }
};

function Handle(Compoennt) {
    return function HOC(props) {
        const navigate = useNavigate()
        console.log(navigate, 2)
        return <Compoennt {...props} navigate={navigate}/>
    }
}

export default Handle(Menu);

/*
*   在 react-router-dom v6 中
*   想获取路由消息，只能基于 hook函数
*   + 只要基于 <Route> 包裹的组件，不论是否基于 <Route>匹配渲染的
*   + 默认都不能基于props获取相关的对象消息
*   + 只能基于 hook 组件获取
*   类组件，我们需要重写 withRouter(v6干掉了这个api)
*
*   与router5的区别
*   + 取消了 history 对象，基于navigate 路由导航
*   + 取消了 withRouter api，需要基于 hook重写
*
* */